<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
    data与el的两种写法
    el写法：
        1.new Vue的时候配置el属性（element）
        2.先创建Vue实例（const vm=new Vue()），根据自己需要挂在的时候 vm=$mount("#root")
    data写法:
        1.对象式
        2.函数式
        如何选择：以后学到组件，必须用函数式，否则会报错
    一个重要的原则：
        由Vue管理的函数不要用箭头函数，比如data:()=>{} 由于该箭头函数是data对象的，也就是它本身没有this，会指向上一级也就是window
    -->
     <div id="root">
        <div>以后学习到组件后，data必须用函数式。{{name}}</div>
     </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm=new Vue({
            // el：挂在实例到html第一种方法
            // el:"#root"
            // —————————————
            // data第一种写法
            // data:{
            //     nihao:"hello"
            // }
            // data第二种写法 函数式，且这个函数必须返回一个对象
            data:function(){ // 也可以用 data() 因为在对象里写函数
                console.log(this); // 此处的this是vue实例对象                
                return {
                    name:"尚硅谷"
                }
            }
        })
        vm.$mount("#root")// el：挂在实例到html第二种方法，这种更灵活，比如可以用定时器延时2秒再执行
    </script>
</body>
</html>